<script setup lang="ts">

import type {MButton} from "@/types/modules/data.ts";
import {ref} from "vue";

const data = ref<MButton[]>(
    [
        {icon: "en", title: "English", value: "As"},
        {icon: "jp", title: "日本語", value: "As"},
        {icon: "tw", title: "繁體中文", value: "As"},
        {icon: "kr", title: "한국어", value: "As"},
    ]
)
</script>
<template lang="pug">
h1   {{ $t('menu.game') }}
.lang
    p.title
        span.global
        b  Language
    select.didact
        option(v-for="(item,index) in data" :value="item.title") {{item.title}}
</template>

<style scoped lang="scss">
@import "@/assets/styles/sass/index";
.lang {
    position: absolute;
    display: inline-block;
    left: revert;
    right: 15px;
    color: #fff;
    @include m-flex_vertical;
    p.title {
        font-size: $--m_font_size ;

        b {
            width: 4.57vw;
            height: 4.57vw;
        }
    }
}

span.global {
    position: fixed;
    width: 4.57vw;
    height: 4.57vw;
    margin-top: -5vw;
    margin-left: -10vw;
    transform: rotate(0deg) translate(65%, 120%);
    background: url("https://mememori-game.com/assets/en/img/icon_glabal.png") no-repeat center top / 100% auto;
}

select.didact {
    position: absolute;
    margin-top: 10vw;
    @include option_language();
    font-size: $--m_font_size;
    color: #efefef;

    option {
        @include option_language_item;
        color: #c92e2e;
    }
}
</style>

